$danger-color:#FF5257;

.sp-component-picker {
  
  .at-float-layout__container {
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
    overflow: hidden;
    height:720px;
  }

  .layout-body {
    padding: 0;
    height: 100%;

    .layout-body__content{
      height: 100%;
    }
  }

  .header {
    height: 120px;
    background: #F9FAFB;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 40px;

    .left,
    .right {
      font-size: 36px;
      font-weight: 500;
    }

    .left {
      color: #666F83;
    }

    .right {
      color: #21b991;

      &.danger{
        color:$danger-color;
      }
    }

    .center {
      font-size: 40px;
      font-weight: 400;
      color: #111A34;
    }
  }

  .content {

    height: calc( 100% - 120px);

    .columns {
      display: flex;
      cursor: grab;
      position: relative;
      height: 100%; 
      .column {
        flex: 1;
        overflow: hidden;

        .column_wrapper {
          transition-timing-function: cubic-bezier(0.23, 1, 0.68, 1);
          display: flex;
          flex-direction: column;

          .columns_item {
            height: 100px;
            @include flexbox;

            .text{
              font-size: 32px;
              color:#41485D;
              opacity: 0.7;
            }

            &.selected{
              color:var(--color-primary);
              position: relative;

              .text{
                color:var(--color-primary);
                opacity: 1;
              }

              &::after{
                display: block;
                font-family: "iconfont" !important;
                font-size: 20px;
                font-style: normal;
                -webkit-font-smoothing: antialiased;
                -moz-osx-font-smoothing: grayscale;
                content: "\e836";
                position: absolute;  
                right:180px;
              }
            }
          }

        }
      }



    }

    .frame {
      position: absolute;
      top: 50%;
      right: 16px;
      left: 16px;
      z-index: 2;
      -webkit-transform: translateY(-50%);
      transform: translateY(-50%);
      pointer-events: none;
      height:100px;

      &:after{
        position: absolute;
        box-sizing: border-box;
        content: ' ';
        pointer-events: none;
        top: -50%;
        right: -50%;
        bottom: -50%;
        left: -50%;
        border: 0 solid #ebedf0;
        -webkit-transform: scale(0.5);
        transform: scale(0.5); 
        border-width: 1px 0;
      }
    }
  }

}
